<template>
  <div class="magic-cube-wrapper" :style="{ width: `${property.colCount * CUBE_SIZE}px` }">
    <div class="title">
      <el-text type="info" size="small">
        {{ property.title }}
      </el-text>
    </div>
    <div
      class="relative magic-cube-content"
      :style="{ height: `${calculateTotalHeight()}px` }"
    >
      <div
        v-for="(item, index) in property.list"
        :key="index"
        class="absolute content"
        :style="{
          width: `${item.width * CUBE_SIZE - property.space * 2}px`,
          height: `${item.box_height}px`,
          margin: `${property.space}px`,
          top: `${item.top * CUBE_SIZE}px`,
          left: `${item.left * CUBE_SIZE}px`
        }"
      >
        <div class="relative">
          <el-image
            class="h-full w-full"
            fit="cover"
            :src="item.imgUrl"
            :style="{
              borderTopLeftRadius: `${property.borderRadiusTop}px`,
              borderTopRightRadius: `${property.borderRadiusTop}px`,
              borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
              borderBottomRightRadius: `${property.borderRadiusBottom}px`
            }"
          >
            <template #error>
              <div class="image-slot">
                <div
                  class="flex items-center justify-center"
                  :style="{
                    width: `${item.width * CUBE_SIZE}px`,
                    height: `${item.height * CUBE_SIZE}px`
                  }"
                >
                  <Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
                </div>
              </div>
            </template>
          </el-image>

            <div class="swiper_box" v-if="item.swipertStatus">
              <div 
                :style="{
                    fontSize: `${item.size}px`,
                    textAlign: item.txtPosition
                }"
                class="swiper_title"
              >
              {{ item.swiperTxt }}
              </div>
              <div
                fit="cover"
                class="swiperImg"
                :style="{
                    height: `${item.swiperImgHeight}px`
                }"
              >
                <div style="width: 100%;">
                  <el-carousel :height="`${item.swiperImgHeight}px`"  indicator-position="none">
                    <el-carousel-item v-for="x in item.imgArr" :key="x">
                      <el-image :src="x" class="small justify-center"/>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MagicCubeProperty } from './config'

/** 广告魔方 */
defineOptions({ name: 'MagicCube' })
const props = defineProps<{ property: MagicCubeProperty }>()
// 一个方块的大小
const CUBE_SIZE_OLD = 93.75

const CUBE_SIZE = computed(() => {
  return 375 / props.property.colCount
})
/**
 * 计算方块的行数
 * 行数用于计算魔方的总体高度，存在以下情况：
 * 1. 没有数据时，默认就只显示一行的高度
 * 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
 * 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
 */
const rowCount = computed(() => {
  let count = 0
  if (props.property.list.length > 0) {
    // 最大行号
    count = Math.max(...props.property.list.map((item) => item.bottom))
  }
  // 行号从 0 开始，所以加 1
  return count + 1
})

const calculateTotalHeight = () => {
  if (props.property.list.length === 0) return 0
  
  // Group items by their row (top position)
  const rows = new Map<number, number>()
  
  props.property.list.forEach(item => {
    const row = item.top
    const currentMaxHeight = rows.get(row) || 0
    rows.set(row, Math.max(currentMaxHeight, item.box_height))
  })
  
  // Sum up all row heights
  let totalHeight = 0
  rows.forEach(height => {
    totalHeight += height
  })
  
  return totalHeight
}
</script>

<style scoped>


.title {
  margin-left: 4px;
  font-family: "PingFang SC Heavy", sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #333;
  text-align: left;
}

.magic-cube-content {
  position: relative;
}

.swiper_title{
  width: 70%;
}

.swiper_box{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.swiperImg{
  display: flex;
  width: 100% ;
  height: 50px;
  margin-top: 10px;
  background-color: #ddd;
  align-items: center;
  justify-content: center;
}

.h-full{
  position: relative;
}

.el-carousel__item h3 {
  margin: 0;
  line-height: 50px;
  color: #475669;
  text-align: center;
  opacity: 0.75;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.content {
  font-size: 14px;
  text-align: center;
}
</style>
